<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    status-icon
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
  >
  <!-- 用户名 -->
      <el-form-item  prop="username" class="email_div">
    <div class="icon_div"><i class="iconfont icon-yanzhengyanzhengma"></i></div>
      <el-input v-model="ruleForm.username"  autocomplete="off" placeholder="请输入用户名"/>
    </el-form-item>
  <!-- 获取邮箱验证码 -->
    <el-form-item  prop="email" class="email_div">
    <div class="icon_div"><i class="iconfont icon-youxiang"></i></div>
      <el-input v-model="ruleForm.email"  autocomplete="off" placeholder="请输入邮箱"/>
      <el-button @click="getEmail()" size="mini" :loading="loading">{{ text }}</el-button>
    </el-form-item>
<!-- 邮箱验证码 -->
    <el-form-item  prop="email" class="email_div">
    <div class="icon_div"><i class="iconfont icon-yanzhengyanzhengma"></i></div>
      <el-input v-model="ruleForm.code"  autocomplete="off" placeholder="请输入验证码"/>
    </el-form-item>
    <!-- 密码 -->
   <el-form-item  prop="email" class="email_div">
    <div class="icon_div"><i class="iconfont icon-mima"></i></div>
      <el-input v-model="ruleForm.password"  autocomplete="off" placeholder="请输入密码"/>
    </el-form-item>
    <!-- 确认密码 -->
    <el-form-item  prop="email" class="email_div">
    <div class="icon_div"><i class="iconfont icon-mima"></i></div>
      <el-input v-model="ruleForm.pwd"  autocomplete="off" placeholder="请再次输入密码"/>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
       注册
      </el-button>
      
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { get_email, store_email } from '@/api/index'
import { ElMessage } from 'element-plus'

//\src\utils\Mylcon.js

const ruleFormRef = ref<FormInstance>()
const loading = ref(false)
const text=ref("获取验证码")
const ress=ref()


const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入该项'))
  } else {
    callback()
  }
}
const ruleForm = reactive({
  email: '',
  code: '',
  password: '',
  pwd:"",
  username: '',
})

const rules = reactive<FormRules<typeof ruleForm>>({
  username: [{ validator: validatePass, trigger: 'blur' }],
  email: [{ validator: validatePass, trigger: 'blur' }],
  code: [{ validator: validatePass, trigger: 'blur' }],
  password: [{ validator: validatePass, trigger: 'blur' }],
  pwd: [{ validator: validatePass, trigger: 'blur' }],
})



//提交表单
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('正确!')
      if(ruleForm.password===ruleForm.pwd)
      {
        //把邮箱和密码传给后端
        let params={
          email:ruleForm.email,
          username:ruleForm.username,
          password:ruleForm.password
        }
        // store_email
        store_email(params).then((res)=>{
          console.log(res, "点击注册")
        })
      }else{
        
         ElMessage({
                    message: '两次密码不一致',
                    type: 'error',
                })
      }
      //判断验证码
      let code = sessionStorage.getItem("emailCode")
      if(code===ruleForm.code)
      {
               ElMessage({
                    message:"注册成功",
                    type: 'success',
                })
      }else{
        
        ElMessage({
                    message: '注册失败',
                    type: 'error',
                })
      }

    } else {
      console.log('失败!')
    }
  })
}

//获取邮箱验证码
const getEmail = () => {
  let params = {
    email: ruleForm.email
  }
if(!ruleForm.email)
{
  ElMessage({
    message: '请输入邮箱',
    type: 'error'
  })
  return;
}else{
  let time=60;
  loading.value=true
  text.value = `${time}s`;
 const intervalId = setInterval(() => {
    time--;
    text.value = `${time}s`;
    if (time <= 0) {
      clearInterval(intervalId);
      text.value = "获取验证码";
      loading.value = false;
    }
  }, 1000);

  //60秒后可重新获取验证码
  if(text.value==="获取验证码")
  {
    text.value=`${time}s`
    loading.value=true
    setTimeout(() => {
      text.value="获取验证码"
    }, 60000);

} 
}
  console.log("邮箱:", params)

  get_email(params).then((res) => {
    console.log("邮箱验证码:", res)
    ress.value = res
    if (res.data.code) {
      //会话存储验证码
      sessionStorage.setItem("emailCode", res.data.Yzm)
     // 一分钟后删除存储的验证码
     setTimeout(() => {
       sessionStorage.removeItem("emailCode")
      }, 60000)
      if(res.data.msg===403)
      {
        ElMessage({
                    message:res.data.msg,
                    type: 'success',
          })
      }else{
     
        ElMessage({
                    message:res.data.msg,
                    type: 'error',
          })
      }
      
    } else {
      console.log("获取邮箱验证码失败")

    }
  }).catch((error) => {
    console.error("获取邮箱验证码失败:", error)
  })
}


</script>
<style scoped lang="scss">
.email_div{
  width: 100%;
  margin-left: 15px;
  .icon_div{
    i{
      font-size: 25px;
      color: #8e8e8e;
    }
   
  }
 .el-input{
  width: 170px;
 }
 .el-button{
  width: 105px;
  font-size: 15px;
  color:#fff;
  background-color: #3087ea;
 }
}
</style>